<html>

<head>
  <title>Gradio Predict API Docs</title>
  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-123499302-2"></script>
  <script>
    window.dataLayer = window.dataLayer || [];

    function gtag() {
      dataLayer.push(arguments);
    }
    gtag('js', new Date());

    gtag('config', 'UA-123499302-2');
  </script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="icon" type="image/png" href="https://gradio.app/static/logo.png">

  <link rel="preload" href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" as="style"
    onload="this.onload=null;this.rel='stylesheet'">
  <noscript>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap">
  </noscript>

  <style>
    html {
      font-size: 16px;
    }

    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      margin: 0;
    }

    header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .container {
      max-width: 1028px;
      padding-left: 24px;
      padding-right: 24px;
      width: 100%;
      margin: 0 auto;
      box-sizing: border-box;
    }

    header img {
      height: 40px;
      margin-top: 12px;
    }

    nav {
      display: flex;
      justify-content: flex-end;
    }

    span {
      font-family: monospace;
      color: #eb9f59;
    }

    header span {
      font-family: inherit;
    }

    nav a,
    nav div {
      margin-left: 48px;
      padding: 4px 0px;
      font-weight: bold;
      font-size: 1rem;
    }

    a {
      text-decoration: none;
      color: inherit;
    }

    #docs {
      display: flex;
      position: relative;
    }

    #docs-content {
      width: inherit;
      padding: 16px;
      line-height: 1.7em;
    }

    .highlight-green {
      background: #c0e8c5;
      padding: 4px;
    }

    .highlight-red {
      background: #ef9a93;
      padding: 4px;
      color: white;
    }

    #copy-button,
    #copy_syntax,
    #post-button {
      background: whitesmoke;
      border: none;
      font: inherit;
      cursor: pointer;
      font-weight: bolder;
      color: eb9f59;
      padding: 4px 8px;
      border-radius: 4px;
    }

    center {
      padding-bottom: 20px;
    }

    .json {
      background: whitesmoke;
      padding-left: 10px;
      overflow: auto;
      font-family: monospace;
    }

    input {
      color: #eb9f59;
    }

    .syntax {
      display: inline-block;
      vertical-align: top;
      margin-block: 0;
    }

    .hidden {
      display: none;
    }

    #api_url {
      font-weight: bolder;
    }

    #demo-nav {
      display: flex;
    }

    .demo-link {
      font-size: 1rem;
      padding: 8px 16px 12px;
      flex-grow: 1;
    }

    .demo-link.selected {
      border: solid 1px lightgray;
      border-bottom: none;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      font-weight: bold;
    }

    .demo-link:not(.selected) {
      border-bottom: solid 1px lightgray;
    }

    .selected {
      border-bottom: none !important;
      color: #ed9013;
    }

    .demo-window {
      padding: 16px;
      border: solid 1px lightgray;
      border-top: none;
      box-shadow: 0px 12px 28px -21px black;
      margin-bottom: 20px;
    }

    .demo-window:not([demo="1"]) {
      display: none;
    }

    .demo {
      border: solid 1px lightgray;
      padding: 12px;
      border-radius: 4px;
      margin-right: 40px;
    }

    nav a:hover,
    button[demo]:hover {
      color: #ed9013;
    }

    #demos button {
      border: solid 1px lightgray;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      background: none;
      font: inherit;
      cursor: pointer;
    }

    .demo-window .json {
      padding: inherit;
    }
    .disabled {
      color: grey !important;
      pointer-events: none;
    }
  </style>

  <meta property="og:url" content="https://gradio.app/" />
  <meta property="og:type" content="website" />
  <meta property="og:image" content="https://gradio.app/static/home/img/social-cheetah.jpg" />
  <meta property="og:title" content="Gradio" />
  <meta property="og:description"
    content="Generate an easy-to-use UI for your ML model, function, or API with only a few lines of code." />
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:creator" content="@teamGradio">
  <meta name="twitter:title" content="Gradio">
  <meta name="twitter:description"
    content="Generate an easy-to-use UI for your ML model, function, or API with only a few lines of code.">
  <meta name="twitter:image" content="https://gradio.app/static/home/img/social-cheetah.jpg">

</head>

<body>

  <header class="container">
    <a href="https://gradio.app">
      <div class="pc pc1 w0 h0 opened">
        <img class="bi x0 y0 w0 h0" alt=""
          src="">
      </div>
    </a>
    <nav>
      <a id="go-to-interface-url" href="/"><span>Go To Interface</span></a>
    </nav>
  </header>

  <main id="docs" class="container">

    <div id="docs-content">
      <h2>
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" viewBox="0 0 189.38997 219.02647" version="1.1" id="svg6" style="
            width: 3%;
            vertical-align: middle;
        ">
          <g transform="translate(-48.100733,-16.629147)" style="fill:#eb9f59;fill-opacity:1">
            <path style="fill:#eb9f59;fill-opacity:1;stroke-width:0.264583" d="m 99.013488,228.53136 c 0.26339,-0.29104 0.538422,-0.52916 0.611182,-0.52916 0.07276,0 -0.08321,0.23812 -0.346599,0.52916 -0.26339,0.29105 -0.538421,0.52917 -0.611182,0.52917 -0.07276,0 0.08321,-0.23812 0.346599,-0.52917 z m -41.552032,-2.44739 -1.045885,-1.12448 1.12448,1.04588 c 0.618463,0.57524 1.124479,1.08126 1.124479,1.12448 0,0.20018 -0.230413,-1.3e-4 -1.203074,-1.04588 z m 44.594744,-0.56292 c 0,-0.0549 0.20836,-0.2633 0.46302,-0.46302 0.41964,-0.32911 0.429,-0.31975 0.0999,0.0999 -0.34564,0.44073 -0.56291,0.58088 -0.56291,0.36312 z m -53.933229,-23.7126 c 0,-0.3638 0.06006,-0.51263 0.133454,-0.33073 0.0734,0.1819 0.0734,0.47956 0,0.66146 -0.0734,0.1819 -0.133454,0.0331 -0.133454,-0.33073 z M 113.18959,74.654109 c 0.0127,-0.308226 0.0754,-0.370919 0.15985,-0.159853 0.0764,0.190994 0.067,0.4192 -0.0209,0.507119 -0.0879,0.08792 -0.15045,-0.06835 -0.13896,-0.347266 z M 225.61661,46.927302 c 0,-0.05494 0.20836,-0.2633 0.46302,-0.463021 0.41965,-0.329107 0.42901,-0.319749 0.0999,0.0999 -0.34564,0.44073 -0.56292,0.580888 -0.56292,0.363125 z m -51.85833,-2.38125 c 0,-0.05494 0.20836,-0.2633 0.46302,-0.463021 0.41965,-0.329107 0.429,-0.319749 0.0999,0.0999 -0.34565,0.44073 -0.56292,0.580888 -0.56292,0.363125 z m 4.49792,-5.291666 c 0,-0.05494 0.20836,-0.263301 0.46302,-0.463021 0.41964,-0.329108 0.429,-0.319749 0.0999,0.0999 -0.34564,0.44073 -0.56291,0.580887 -0.56291,0.363125 z m -46.43438,-4.662604 c 0.71666,-0.727605 1.36256,-1.322917 1.43532,-1.322917 0.0728,0 -0.45407,0.595312 -1.17074,1.322917 -0.71666,0.727604 -1.36255,1.322916 -1.43531,1.322916 -0.0728,0 0.45407,-0.595312 1.17073,-1.322916 z m 36.3306,-17.64324 c 0.191,-0.07643 0.4192,-0.06703 0.50712,0.02088 0.0879,0.08792 -0.0683,0.150452 -0.34727,0.138964 -0.30822,-0.0127 -0.37092,-0.07539 -0.15985,-0.15985 z m 2.91042,-0.264583 c 0.19099,-0.07643 0.4192,-0.06703 0.50712,0.02088 0.0879,0.08792 -0.0684,0.150453 -0.34727,0.138965 -0.30823,-0.0127 -0.37092,-0.07539 -0.15985,-0.159851 z m 6.08541,0 c 0.191,-0.07643 0.4192,-0.06703 0.50712,0.02088 0.0879,0.08792 -0.0684,0.150453 -0.34726,0.138965 -0.30823,-0.0127 -0.37092,-0.07539 -0.15986,-0.159851 z"></path>
            <path style="fill:#eb9f59;fill-opacity:1;stroke-width:0.264583" d="m 76.606587,235.49438 c 0.190995,-0.0764 0.419201,-0.067 0.507119,0.0209 0.08792,0.0879 -0.06835,0.15047 -0.347266,0.13899 -0.308226,-0.0127 -0.370919,-0.0754 -0.159853,-0.15987 z m -28.47381,-28.79114 c 0.0054,-0.43656 0.06469,-0.58313 0.131773,-0.32569 0.06708,0.25743 0.06267,0.61461 -0.0098,0.79375 -0.07248,0.17913 -0.127363,-0.0315 -0.12197,-0.46806 z m -0.03069,-3.9908 c 0.0127,-0.30822 0.07539,-0.37092 0.159851,-0.15985 0.07643,0.19099 0.06703,0.4192 -0.02088,0.50712 -0.08792,0.0879 -0.150452,-0.0684 -0.138964,-0.34727 z M 172.12117,142.09646 c 0.191,-0.0764 0.4192,-0.067 0.50712,0.0209 0.0879,0.0879 -0.0683,0.15046 -0.34727,0.13897 -0.30822,-0.0127 -0.37092,-0.0754 -0.15985,-0.15985 z m 2.91042,-0.26458 c 0.19099,-0.0764 0.4192,-0.067 0.50712,0.0209 0.0879,0.0879 -0.0684,0.15045 -0.34727,0.13897 -0.30823,-0.0127 -0.37092,-0.0754 -0.15985,-0.15986 z m 39.73711,-15.79416 c 0,-0.0549 0.20836,-0.2633 0.46302,-0.46302 0.41964,-0.32911 0.429,-0.31975 0.0999,0.0999 -0.34564,0.44073 -0.56291,0.58089 -0.56291,0.36313 z M 188.64109,84.143941 c 0.40018,-0.06062 1.05503,-0.06062 1.45521,0 0.40018,0.06062 0.0728,0.110222 -0.7276,0.110222 -0.80037,0 -1.12779,-0.0496 -0.72761,-0.110222 z m 48.63808,-0.493999 c 0.0127,-0.308226 0.0754,-0.370919 0.15985,-0.159853 0.0764,0.190995 0.067,0.4192 -0.0209,0.507119 -0.0879,0.08792 -0.15045,-0.06835 -0.13896,-0.347266 z m -34.8136,-4.872744 c 0.56839,-0.582083 1.09297,-1.058333 1.16573,-1.058333 0.0728,0 -0.33276,0.47625 -0.90115,1.058333 -0.56838,0.582084 -1.09296,1.058334 -1.16572,1.058334 -0.0728,0 0.33275,-0.47625 0.90114,-1.058334 z m 34.84429,-3.836458 c 0.005,-0.436563 0.0647,-0.583126 0.13177,-0.325694 0.0671,0.257431 0.0627,0.614619 -0.01,0.79375 -0.0725,0.179131 -0.12737,-0.03149 -0.12197,-0.468056 z M 165.9076,61.44699 c 0.001,-1.018646 0.049,-1.402943 0.10627,-0.853996 0.0573,0.54895 0.0563,1.382387 -0.002,1.852084 -0.0585,0.469699 -0.10532,0.02056 -0.10414,-0.998088 z m 58.3861,-12.932188 c 0,-0.05494 0.20836,-0.2633 0.46302,-0.463021 0.41964,-0.329107 0.429,-0.319749 0.0999,0.0999 -0.34564,0.44073 -0.56291,0.580888 -0.56291,0.363125 z m -48.15417,-6.879166 c 0,-0.05494 0.20836,-0.263301 0.46302,-0.463021 0.41965,-0.329108 0.429,-0.319749 0.0999,0.0999 -0.34565,0.44073 -0.56292,0.580887 -0.56292,0.363125 z m 4.49792,-5.291667 c 0,-0.05494 0.20836,-0.2633 0.46302,-0.463021 0.41964,-0.329107 0.429,-0.319749 0.0999,0.0999 -0.34564,0.44073 -0.56291,0.580888 -0.56291,0.363125 z m -46.30209,-3.96875 c 0,-0.05494 0.20836,-0.2633 0.46302,-0.463021 0.41965,-0.329107 0.42901,-0.319749 0.0999,0.0999 -0.34564,0.44073 -0.56292,0.580888 -0.56292,0.363125 z m 45.45873,-15.426677 c 0.19099,-0.07643 0.4192,-0.06703 0.50712,0.02088 0.0879,0.08792 -0.0684,0.150452 -0.34727,0.138964 -0.30823,-0.0127 -0.37092,-0.07539 -0.15985,-0.15985 z m -7.29258,-0.276585 c 0.5457,-0.05708 1.43867,-0.05708 1.98437,0 0.54571,0.05708 0.0992,0.103786 -0.99218,0.103786 -1.09141,0 -1.53789,-0.0467 -0.99219,-0.103786 z m 3.85299,0.01201 c 0.191,-0.07643 0.4192,-0.06703 0.50712,0.02088 0.0879,0.08792 -0.0683,0.150453 -0.34726,0.138964 -0.30823,-0.0127 -0.37092,-0.07539 -0.15986,-0.15985 z"></path>
            <path style="fill:#eb9f59;fill-opacity:1;stroke-width:0.264583" d="m 75.212304,235.2476 c -4.768424,-0.86074 -9.89013,-3.14915 -14.156303,-6.32518 -9.921891,-7.38651 -14.817371,-19.77821 -12.085188,-30.5907 1.113261,-4.40567 2.03654,-6.45122 4.739941,-10.50147 0.712058,-1.06681 15.399907,-20.21223 32.639659,-42.54536 l 31.345007,-40.60571 -1.19176,-3.88901 c -1.77435,-5.790137 -2.19948,-7.791017 -3.06496,-14.425346 -0.83847,-6.427195 0.12466,-16.786696 2.23901,-24.082846 1.61271,-5.565148 5.04296,-12.996921 8.10684,-17.563838 9.1454,-13.631799 22.76859,-23.101774 38.33206,-26.646 7.1018,-1.617273 17.42134,-1.617477 24.53969,-5.29e-4 2.79586,0.635148 6.68115,1.784175 6.68115,1.975914 0,0.681228 -8.51197,11.500323 -15.606,19.835923 -8.93791,10.502194 -9.94047,11.958402 -11.0907,16.109143 -2.03047,7.327204 0.13873,14.823086 6.0037,20.746331 4.98075,5.030238 10.43175,7.42704 16.85654,7.41181 3.38749,-0.008 5.42319,-0.468852 8.16035,-1.847262 3.93316,-1.980711 6.66847,-4.747496 10.15627,-10.273147 6.09648,-9.658522 16.39286,-23.861334 18.66603,-25.747895 0.83884,-0.69618 6.11005,9.216877 8.0958,15.225014 5.59821,16.938083 3.0088,35.139117 -7.18486,50.502628 -10.315,15.54639 -27.259,26.03055 -47.2239,29.21996 -3.03525,0.48488 -9.10183,1.03651 -11.45889,1.04194 l -2.26837,0.005 -31.51693,40.81198 c -17.33431,22.44659 -32.05376,41.4589 -32.70988,42.24959 -3.066208,3.69504 -8.092656,7.18047 -12.802697,8.87762 -3.905258,1.40716 -9.76262,1.83248 -14.201609,1.03121 z"></path>
          </g>
        </svg>
        Predict API Docs for: <span id="stripped_url"></span>
      </h2>
      <p>This interface takes in <span><strong>{{ len_inputs }}</strong></span> input(s) and returns <span>
          <strong>{{ len_outputs }}</strong></span> output(s).</p>
      <p>The URL endpoint is: <span id="api_url"></span>
        <button id="copy-button" onclick="copyToClipboard('#api_url')">COPY</button>
      </p>

      <h3 id="inputs">Input(s): [{%for i in range(0, len_inputs)%} <span><a
            href="https://gradio.app/docs#i_{{ inputs_lower[i] }}">{{inputs[i]}}</a></span>{% if i !=
        len_inputs - 1 %} ,{% endif %}{%endfor%} ]</h3>
      <ul>

        {%for i in range(0, len_inputs)%}
        <li><strong>{{inputs[i]}}</strong> accepts the <span><em> {{ input_types_doc[i]}}</em></span> as type <span><em>{{ input_types[i] }}</em></span></li>
        {%endfor%}

      </ul>
      <h3 id="outputs">Output(s): [{%for i in range(0, len_outputs)%} <span><a
            href="https://gradio.app/docs#o_{{ outputs_lower[i] }}">{{outputs[i]}}</a></span>{% if i !=
        len_outputs - 1 %} ,{% endif %}{%endfor%} ]</h3>
      <ul>

        {%for i in range(0, len_outputs)%}
        <li><strong>{{outputs[i]}}</strong> returns the <span><em> {{ output_types_doc[i]}}</em></span> as type <span><em> {{ output_types[i]}}</em></span></li>
        {%endfor%}

      </ul>

      <h4 id="payload">Payload: </h4>
      <div class="json">
        <p>&emsp;&emsp;{</p>
        <p>&emsp;&emsp;&emsp;&emsp;"data": [{%for i in range(0, len_inputs)%} <span>{{ input_types[i]
            }}</span>{% if i != len_inputs - 1 %} ,{% endif %}{%endfor%} ]</p>
        <p>&emsp;&emsp;}</p>
      </div>
      {% if auth is not none %}
      <p>Note: This interface requires authentication. This means you will have to first post to the login api before you can post to the predict endpoint. See below for more info </p>
      {%  endif %}
      <h4 id="response">Response: </h4>
      <div class="json">
        <p>&emsp;&emsp;{</p>
        <p>&emsp;&emsp;&emsp;&emsp;"data": [{%for i in range(0, len_outputs)%} <span>{{ output_types[i]
            }}</span>{% if i != len_outputs - 1 %} ,{% endif %}{%endfor%} ],</p>
        <p>&emsp;&emsp;&emsp;&emsp;"durations": [ float ],   # the time taken for the prediction to complete</p>
        <p>&emsp;&emsp;&emsp;&emsp;"avg_durations": [ float ]    # the average time taken for all predictions so far (used to estimate the runtime)</p>
        <p>&emsp;&emsp;}</p>
      </div>
      <h4 id="try-it">Try it (live demo): </h4>

      <div id="demos" class="container">
        <div id="demo-nav">
          <button id="python" demo="1" class="selected demo-link">
            <div class="demo-long">Python</div>
          </button>
          <button id="curl" demo="2" class="demo-link">
            <div class="demo-long">cURL</div>
          </button>
          <button id="js" demo="3" class="demo-link">
            <div class="demo-long">Javascript</div>
          </button>

        </div>

        <div class="demo-window" demo="1">




          <div class="json">
            {% if auth is not none %}
<!--              import requests-->

<!--              sess = requests.session()-->
<!--              sess.post(url='INTERFACE_URL/login', data={"username": "USERNAME", "password":"PASSWORD"})-->
<!--              r = sess.post(url='INTERFACE_URL/api/predict/',json={"data":[INPUT]}, )-->
<!--              -->
<!--              print(r.json())-->

            <p class="syntax">import requests</p>
            <br>
            <p class="syntax">sess = requests.session()</p>
            <br>
            <p class="syntax">sess.post(url='<span class="syntax" id="py_syntax_url_login"></span><p class="syntax">',</p> data={"username": "USERNAME", "password":"PASSWORD"})
            <br>
            <p class="syntax">r = sess.post(url='<span class="syntax" id="py_syntax_url"></span>
            <p class="syntax">',</p>
            <p class="syntax"> json={"data":</p> [{% for i in range(0, len_inputs) %}<span class="syntax"
              id="py_input_syntax_{{i}}">{{ sample_inputs[i]|tojson }}</span>{% if i != len_inputs - 1 %}<p class="syntax">,</p>{%
            endif %}{%endfor%}<p class="syntax">]})</p>
            </p>
            <p>r.json()</p>


            {%  else %}

            <p class="syntax">import requests</p>
            <br>
            <p class="syntax">r = requests.post(url='<span class="syntax" id="py_syntax_url"></span>
            <p class="syntax">',</p>
            <p class="syntax"> json={"data":</p> [{% for i in range(0, len_inputs) %}<span class="syntax"
              id="py_input_syntax_{{i}}">{{ sample_inputs[i]|tojson }}</span>{% if i != len_inputs - 1 %}<p class="syntax">,</p>{%
            endif %}{%endfor%}<p class="syntax">]})</p>
            </p>
            <p>r.json()</p>

            {%  endif %}
          </div>

        </div>
        <div class="demo-window" demo="2">
          <div class="json">
            {% if auth is not none %}
            <p class="syntax">curl -X POST&nbsp;-F 'username=USERNAME' -F 'password=PASSWORD' <span class="syntax" id="curl_syntax_url_login"></span>&nbsp;-c cookies.txt </p>

            <p class="syntax">curl -X POST&nbsp;</p><span class="syntax" id="curl_syntax_url"></span>&nbsp;-H
            'Content-Type: application/json' -d '{"data": [{%for i
            in range(0, len_inputs)%}<span class="syntax" id="curl_input_syntax_{{i}}">{{ sample_inputs[i]|tojson }}</span>{% if i !=
            len_inputs - 1 %}<p class="syntax">,</p>{% endif %}{%endfor%}<p class="syntax">]}'  -b cookies.txt </p>


            {%  else %}

            <p class="syntax">curl -X POST&nbsp;</p><span class="syntax" id="curl_syntax_url"></span>&nbsp;-H
            'Content-Type: application/json' -d '{"data": [{%for i
            in range(0, len_inputs)%}<span class="syntax" id="curl_input_syntax_{{i}}">{{ sample_inputs[i]|tojson }}</span>{% if i !=
            len_inputs - 1 %}<p class="syntax">,</p>{% endif %}{%endfor%}<p class="syntax">]}' </p>

            {%  endif %}
          </div>

        </div>
        <div class="demo-window" demo="3">
          <div class="json">
            {% if auth is not none %}
            <p class="syntax">// Will only work locally.</p>
            <br>
            <p class="syntax">fetch('<span class="syntax" id="js_syntax_url_login"></span>', { method: "POST",
              body: "username=USERNAME&password=PASSWORD"
            <p class="syntax">, credentials: 'same-origin', headers: { "Content-Type": "application/x-www-form-urlencoded" }
              })</p>
            </p>
            <br>
            <p class="syntax">fetch('<span class="syntax" id="js_syntax_url"></span>', { method: "POST",
              body: JSON.stringify({"data":[{%for i in range(0, len_inputs)%} <span class="syntax"
                id="js_input_syntax_{{i}}">{{ sample_inputs[i]|tojson }}</span>{% if i != len_inputs - 1 %},{% endif %}{%endfor%}
            <p class="syntax">]}), credentials: 'same-origin', headers: { "Content-Type": "application/json" }
              }).then(function(response) { return response.json(); }).then(function(json_response){
              console.log(json_response) })</p>
            </p>
            {%  else %}
            <p class="syntax">fetch('<span class="syntax" id="js_syntax_url"></span>', { method: "POST",
              body: JSON.stringify({"data":[{%for i in range(0, len_inputs)%} <span class="syntax"
                id="js_input_syntax_{{i}}">{{ sample_inputs[i]|tojson }}</span>{% if i != len_inputs - 1 %},{% endif %}{%endfor%}
            <p class="syntax">]}), headers: { "Content-Type": "application/json" }
              }).then(function(response) { return response.json(); }).then(function(json_response){
              console.log(json_response) })</p>
            </p>
            {%  endif %}
          </div>
        </div>
      </div>
      {% if auth is not none %}
      <center>
        <p>Live POST is turned off for interfaces that require authentication.</p>
      </center>
      {%  endif %}
      <center>
        <button id="post-button" onclick="postRequest()">POST</button>
      </center>

      <div class="json" id="response-holder">
        <p><span id="response_status"></span>&emsp;<span id="response_text"></span></p>
        <div class="hidden" id="post_response">
          <p>&emsp;&emsp;{</p>
          <p>&emsp;&emsp;&emsp;&emsp;"data": <span id="post_response_data"></span>,</p>
          <p>&emsp;&emsp;&emsp;&emsp;"durations": <span id="post_response_durations"></span>,</p>
          <p>&emsp;&emsp;&emsp;&emsp;"avg_durations": <span id="post_response_avg_durations"></span></p>
          <p>&emsp;&emsp;}</p>
        </div>
      </div>
    </div>
  </main>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

  <script>
    var len_inputs = {{ len_inputs }};
    var len_outputs = {{ len_outputs }};

    var url = window.location.href;
    // workaround for spaces issue
    if (url.includes("hf.space")) {
      url = url.slice(0,-3) + "+/api"
    }

    const stripTrailingSlash = (str) => {
    return str.endsWith('/') ?
        str.slice(0, -1) :
        str;
    };
    url = stripTrailingSlash(url);
    var api_url = url + '/predict'
    var login_url = url.slice(0, -4) + '/login'
    var interface_url = url.replace(/(api$)/, '')
    $('#api_url').html(api_url);
    $('#py_syntax_url').html(api_url);
    $('#curl_syntax_url').html(api_url);
    $('#js_syntax_url').html(api_url);
    {% if auth is not none %}
      $('#py_syntax_url_login').html(login_url);
      $('#curl_syntax_url_login').html(login_url);
      let js_login_url = {{ local_login_url|tojson }};
      let js_api_url = {{ local_api_url|tojson }};
      $('#js_syntax_url_login').html(js_login_url);
      $('#js_syntax_url').html(js_api_url);
      $('#post-button').addClass('disabled');
      $('#response-holder').addClass('hidden');
    {% endif %}

    $('#stripped_url').html(interface_url);
    $('#go-to-interface-url').attr('href', interface_url);

    function copyToClipboard(element) {
      var $temp = $("<input>");
      $("body").append($temp);
      $temp.val($(element).text()).select();
      document.execCommand("copy");
      $temp.remove();
      $('#copy-button').html("COPIED!");
      setTimeout(() => { $('#copy-button').html("COPY"); }, 1500);
    }



    function postRequest() {
      var sample_inputs = {{ sample_inputs|tojson }}
      let data = { "data": sample_inputs };
      fetch(api_url, {
        method: "POST",
        body: JSON.stringify(data),
        headers: { "Content-Type": "application/json" }
      }).then(function (response) {
        if (response.status == 200) {
          $('#post_response').removeClass("hidden");
          $('#response_status').addClass("highlight-green");
          $('#response_status').removeClass("highlight-red");
          $('#response_text').addClass("highlight-green");
          $('#response_text').removeClass("highlight-red");
          $('#response_status').html(response.status);
          $('#response_text').html(friendlyHttpStatus[response.status]);
          return response.json();
        }
        else {
          $('#post_response').addClass("hidden");
          $('#response_status').addClass("highlight-red");
          $('#response_status').removeClass("highlight-green");
          $('#response_text').addClass("highlight-red");
          $('#response_text').removeClass("highlight-green");
          $('#response_status').html(response.status);
          $('#response_text').html(friendlyHttpStatus[response.status]);
          $('#post-response').html("");
        }
      }).then(function (json_response) {
        $('#post_response_data').html(JSON.stringify(json_response["data"]));
        $('#post_response_durations').html(JSON.stringify(json_response["durations"]));
        $('#post_response_avg_durations').html(JSON.stringify(json_response["avg_durations"]));

      })

      $('#post-button').html("POSTED!");
      setTimeout(() => { $('#post-button').html("POST"); }, 1500);
    }

    $(".demo-link").click(function () {
      let demo_num = $(this).attr("demo");
      $(".demo-link").removeClass("selected");
      $(this).addClass("selected");
      $(".demo-window").hide();
      $(`.demo-window[demo="${demo_num}"]`).show();
    })


    var friendlyHttpStatus = {
      '200': 'OK',
      '201': 'Created',
      '202': 'Accepted',
      '203': 'Non-Authoritative Information',
      '204': 'No Content',
      '205': 'Reset Content',
      '206': 'Partial Content',
      '300': 'Multiple Choices',
      '301': 'Moved Permanently',
      '302': 'Found',
      '303': 'See Other',
      '304': 'Not Modified',
      '305': 'Use Proxy',
      '306': 'Unused',
      '307': 'Temporary Redirect',
      '400': 'Bad Request',
      '401': 'Unauthorized',
      '402': 'Payment Required',
      '403': 'Forbidden',
      '404': 'Not Found',
      '405': 'Method Not Allowed',
      '406': 'Not Acceptable',
      '407': 'Proxy Authentication Required',
      '408': 'Request Timeout',
      '409': 'Conflict',
      '410': 'Gone',
      '411': 'Length Required',
      '412': 'Precondition Required',
      '413': 'Request Entry Too Large',
      '414': 'Request-URI Too Long',
      '415': 'Unsupported Media Type',
      '416': 'Requested Range Not Satisfiable',
      '417': 'Expectation Failed',
      '418': 'I\'m a teapot',
      '429': 'Too Many Requests',
      '500': 'Internal Server Error',
      '501': 'Not Implemented',
      '502': 'Bad Gateway',
      '503': 'Service Unavailable',
      '504': 'Gateway Timeout',
      '505': 'HTTP Version Not Supported',
    };

  </script>
</body>

</html>